<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>打字机效果</title>
    <style>
        @keyframes typing {
            from {
                width: 0;
            }
        }

        @keyframes blink-caret {
            50% {
                border-color: transparent;
            }
        }

        h1 {
            font: bold 20px Consolas, Monaco, monospace;
            border-right: .1em solid;
            width: 10.2em;
            margin: 30px 10px;
            white-space: nowrap;
            overflow: hidden;
            letter-spacing: 0;
            animation: typing 8s steps(10, end), blink-caret .5s step-end infinite alternate;
        }
    </style>
</head>

<body>
    <h1>一二三四五六七八九十</h1>
</body>

</html>